<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>v-if,v-show,v-for</title>
		<script src="js/vue.js"></script>
	</head>

	<body>

		<div id="root">
            <!--
            	作者：offline
            	时间：2018-12-01
            	描述： 
            	v-if 是把当前元素移除   v-show 则是添加一个style='display:none'
            	对于隐藏显示频繁的情况下，使用v-show 性能更好
            -->
			<div v-if="show"> hello world</div>
			<div v-show="show">hello world</div>
			<button @click="changeShow">toggle</button>
			
			<!--
            	作者：offline
            	时间：2018-12-01
            	描述：v-for 循环显示dom结构
            -->
			<ul>
			 <li v-for="(item,index) of list" :key="index">{{item}}</li>
			</ul>
			
		</div>

		<script>
			new Vue({
				el: "#root",
				data: {
					show: true,
					list: [1,2,3]
				},
				methods: {
					changeShow: function() {
						this.show = !this.show;
					}
				},
			
			});
		</script>

	</body>

</html>